<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<!-- 员工登录后的主页 -->
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="名榜,wangid">


<title>部门总监主页</title>

<!-- CSS -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/Tdrag.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/ministerstyle.css">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/style.css">
<!-- 戴布斯：添加alert的样式 -->
<link rel="stylesheet" type="text/css" href="css/logincss/alert.css" />
<!-- layui.js -->
<script src="layui/layui.js" charset="utf-8"></script>
<style type="text/css">
.layui-laydate-content {
	width: 200px;
}

.layui-laydate-header {
	width: 230px;
}

.layui-laydate-footer {
	width: 200px;
}

.menu div {
	background-color: transparent;
	/* 				background: url(images/1216.gif) no-repeat center center;background-size: cover;
 */
	background-size: cover;
	width: 212px;
}

.layui-laydate-content {
	width: 212px;
	background-color: transparent;
}

.layui-laydate-header {
	width: 230px;
}

.layui-laydate-footer {
	width: 212px;
	background-color: transparent;
}

.content_box .left_box .head dl {
	margin-left: 2%;
}

i.layui-icon.laydate-icon.laydate-prev-y {
	display: block;
	width: 28px;
	height: 30px;
	Padding: 0px 5px 0px 5px;
	position: absolute;
}

i.layui-icon.laydate-icon.laydate-prev-m {
	display: block;
	width: 28px;
	height: 30px;
	Padding: 0px 5px 0px 5px;
	position: absolute;
}

i.layui-icon.laydate-icon.laydate-next-y {
	display: block;
	width: 28px;
	height: 30px;
	Padding: 0px 5px 0px 5px;
	position: absolute;
}

i.layui-icon.laydate-icon.laydate-next-m {
	display: block;
	width: 28px;
	height: 30px;
	Padding: 0px 5px 0px 5px;
	position: absolute;
}
</style>

</head>

<body>
	<div class="bg_box"
		style="background: url(images/20180604.jpg) no-repeat center center; background-size: cover;"></div>
	<div class="container">

		<div class="top_box">
			<div class="logo">
				<img src="images/logo_touming.gif"> <span></span> <b> <img
					src="images/word.png" />
				</b>
			</div>
			<div class="top_icon">
				<!-- <a href="#">
					<img src="images/top_home.png">
				</a>
				<a href="#">
					<img src="images/top_person.png">
				</a> -->
				<a href="login.jsp"> <img src="images/top_exit.png">
				</a>
			</div>
		</div>
		<div class="content_box">
			<div class="left_box">
				<div class="head">
					<i> <img src="images/head.jpg" />
					</i>
					<!-- 注释去间隔
	    	     -->
					<dl>
						<dd>
							<b>姓名：</b>${sessionScope.userMessage.userName}
						</dd>
						<dd>
							<b>部门：</b>${sessionScope.userMessage.deptName}
						</dd>
						<dd>
							<b>职务：</b>${sessionScope.userMessage.posName}
						</dd>
						<dd>
							<b>工号：</b>${sessionScope.userMessage.userId}
						</dd>
					</dl>

					<!-- <div class="menu" id="style-3" style="font-family:'楷体' ;padding:1px;">
						<div class="site-demo-laydate" style="font-family:'楷体' ;padding:1px;">
							<div class="layui-inline" id="test-n1"></div>
						</div>
				</div> -->

					<div class="menu" id="style-3" style="font-family: '楷体'">
						<div class="site-demo-laydate">
							<div class="layui-inline" id="test-n1"></div>
						</div>
					</div>
					<script src="layui/layui.all.js"></script>

					<script>
						layui.use('laydate', function() {
							var laydate = layui.laydate;
							laydate.render({
								elem: '#test-n1',
								/* showBottom: false, */
								position: 'static',
								btns: ['clear','now']
							});
						});
					</script>



				</div>
				<!-- <div class="menu" id="style-3">
					<script type="text/javascript">
						$(function() {
							var n = 0;
							$(".left_box .menu ul li").mouseover(function() {
								n = $(this).index();
							})
							$(".left_box .menu ul li h2").click(
									function() {
										$(".left_box .menu ul li").eq(n).find(
												"dl").slideToggle();
										$(".left_box .menu ul li").eq(n)
												.siblings().find("dl")
												.slideUp()

										if ($(this).find("em").hasClass("xz")) {
											$(this).find("em")
													.removeClass("xz")
											$(this).find("em").addClass("xz01")
										} else {
											$(this).find("em").addClass("xz")
											$(this).find("em").removeClass(
													"xz01")
										}
										if ($(".left_box .menu ul li").eq(n)
												.siblings().find("em")
												.hasClass("xz")) {
											$(".left_box .menu ul li").eq(n)
													.siblings().find("em")
													.removeClass("xz")
										}
									})
						})
					</script>
				</div> -->

			</div>

			<div class="right_box">
				<div class="icon_box">
					<ul class="boxList">
						<li class="list"
							style="left: 0%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_01.png"> <b></b>
						</i> <!-- 跳转到通讯录 --> <a href="min.do?op=adb" target="blank"> <span>通讯录</span>
						</a></li>
						<!-- <li class="list"
							style="left: 16.66%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_02.png"> <b></b>
						</i>
							<div class="site-demo-button" id="layerDemo"
								style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="offset"
									data-type="auto"> <span>请假申请</span>
								</a>
							</div></li> -->
						<li class="list"
							style="left: 16.66%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_02.png"> <b></b>
						</i>
							<div class="site-demo-button" id="layerDemo"
								style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="offset2"
									data-type="auto"> <span>假条审批</span>
								</a>
							</div></li>
						<li class="list"
							style="left: 33.33%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_03.png"> <b></b>
						</i> <a href="MYuanGong_messages.jsp" target="blank"> <span>个人信息</span>
						</a></li>
						<li class="list"
							style="left: 49.99%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_04.png"> <b></b>
						</i>
							<div class="site-demo-button" id="layerDemo"
								style="margin-bottom: 0; data-dialog: somedialog">
								<a target="blank" class="gonggao" data-method="notice"> <span>公告通知</span>
								</a>
							</div></li>
						<li class="list"
							style="left: 66.66%; top: 0px; position: absolute; margin: 0px;"><i>
								<img src="images/icon_04.png"> <b></b>
						</i>
							<div class="site-demo-button" id="layerDemo"
								style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="offset3"> <span>发布通知</span>
								</a>
							</div></li>
						<li class="list"
							style="left: 83.33%; top: 0px; position: absolute; margin: 0px;">
							<i> <img src="images/icon_05.png"> <b></b>
						</i> <a href="MMy_mim.jsp" target="blank"> <span>修改密码</span>
						</a>
						<!-- 100% -->
						</li>

						<!-- 	<li class="list">

							<i>
								<img src="images/icon_06.png">
								<b></b>
							</i>
							<a href="My_BJ.jsp" target="blank">
								<span>更换背景</span>
							</a>
						</li>
 -->
					</ul>

					<script>
						jQuery(function() {
							//第九个例子的拖拽
							$(".list").Tdrag({
								scope : ".boxList",
								pos : true,
								dragChange : true,
								changeMode : "sort",
								moveClass : "abc"
							});
						})
					</script>
				</div>
				<!-- iconbox end -->
				<div class="info_box">
					<div class="box battle">
						<div class="tit">
							<a class="on">考勤统计</a>

							<!-- 注释去间隔
	    	   注释去间隔 -->
							<div class="scrollnews">
								<span>公司通知：</span>
								<ul>
									<c:if test="${requestScope.companyNot.get(0)!=null }">
										<li title="1">最新公告：
											${requestScope.companyNot.get(0).notContent } <i>
												${requestScope.companyNot.get(0).notTime }</i>
										</li>
									</c:if>
									<c:if test="${requestScope.companyNot.get(1)!=null }">
										<li title="2">最新公告：
											${requestScope.companyNot.get(1).notContent } <i>
												${requestScope.companyNot.get(1).notTime }</i>
										</li>
									</c:if>
									<c:if test="${requestScope.companyNot.get(2)!=null }">
										<li title="3">最新公告：
											${requestScope.companyNot.get(2).notContent } <i>
												${requestScope.companyNot.get(2).notTime }</i>
										</li>
									</c:if>
								</ul>
								<script type="text/javascript">
									$(document)
											.ready(
													function() {
														//滚动文字
														function runtxt() {
															$(".scrollnews ul")
																	.animate(
																			{
																				marginTop : "-54px"
																			},
																			300,
																			function() {
																				$(
																						".scrollnews ul li:last")
																						.after(
																								$(".scrollnews ul li:first"))
																				$(
																						".scrollnews ul")
																						.css(
																								"margin-top",
																								0)
																			})
														}
														$(".scrollnews ul li a")
																.mouseenter(
																		function() {
																			clearInterval(timer)
																		})
														$(".scrollnews ul li a")
																.mouseleave(
																		function() {
																			timer = setInterval(
																					runtxt,
																					4000)
																		})
														timer = setInterval(
																runtxt, 4000)
													})
								</script>
							</div>
						</div>
						<div class="conbox">
							<div class="con">
								<!-- 考勤表开始 -->


								<div id="main" style="width: 100%; height: 400px;"></div>




								<!-- 考勤表结束 -->
							</div>

						</div>
						<script type="text/javascript">
							$(function() {
								var n = 0;
								$(".right_box .info_box .battle .tit a")
										.mouseover(
												function() {
													n = $(this).index();
													$(this).addClass("on")
													$(this).siblings()
															.removeClass("on")
													$(
															".right_box .info_box .battle .con")
															.hide().eq(n)
															.fadeIn()
												})
							})
						</script>
					</div>
					<div class="box honor">
						<div class="tit">
							<a class="on">我的考勤记录</a> <a>加班时长排行榜</a> <a>今日迟到名单</a> <a>昨日加班名单</a>
							<!-- 注释去间隔
	    				 -->
							<div></div>
						</div>
						<div class="conbox">
							<div class="con">
								<!-- <table class="work">
	    						<th>
	    							<td>日期</td>
	    							<td>上班时间</td>
	    							<td>下班时间</td>
	    						</th>
	    						<tr>
	    							<td>2019-09-19</td>
	    							<td>08:30</td>
	    							<td>17:30</td>
	    						</tr>
	    						<tr>
	    							<td>2019-09-19</td>
	    							<td>08:30</td>
	    							<td>17:30</td>
	    						</tr>
	    						<tr>
	    							<td>2019-09-19</td>
	    							<td>08:30</td>
	    							<td>17:30</td>
	    						</tr>
	    					</table> -->
								<table class="layui-table" lay-filter="mylist" lay-size="lg"
									style="background-color: transparent; border: 0px; color: white;">
									<thead>
										<tr style="background-color: transparent;">
											<!-- <th lay-data="{type:'checkbox',fixed:'left'}"></th> -->
											<th>打卡时间</th>
											<th>加班时长</th>
											<th>考勤状态</th>
										</tr>
									</thead>
									<tbody>
										<c:if test="${requestScope.pageDataAttence.data!=null}">
											<c:forEach var="attence"
												items="${requestScope.pageDataAttence.data}">
												<tr>
													<!-- <td></td> -->
													<td>${attence.attTime}</td>
													<td>${attence.overTime}</td>
													<c:choose>
														<c:when test="${attence.attFlag==0}">
															<td>正常</td>
														</c:when>
														<c:when test="${attence.attFlag==1}">
															<td>迟到</td>
														</c:when>
														<c:when test="${attence.attFlag==2}">
															<td>早退</td>
														</c:when>
														<c:when test="${attence.attFlag==3}">
															<td>加班</td>
														</c:when>
													</c:choose>
												</tr>
											</c:forEach>
										</c:if>
									</tbody>
								</table>
								<div id="page"></div>

							</div>

							<div class="con">
								<div>


									<ul>
										<c:if test="${requestScope.overTimeList.get(0)!=null}">
											<li><i><img src="images/head.jpg"></i>
												<dl>
													<dt>${requestScope.overTimeList.get(0).userName}</dt>
													<dd>所属分区：${requestScope.overTimeList.get(0).deptName}</dd>
												</dl> <b><img src="images/honor_1.png"></b></li>
										</c:if>
										<c:if test="${requestScope.overTimeList.get(1)!=null}">
											<li><i><img src="images/head.jpg"></i>
												<dl>
													<dt>${requestScope.overTimeList.get(1).userName}</dt>
													<dd>所属分区：${requestScope.overTimeList.get(1).deptName}</dd>
												</dl> <b><img src="images/honor_2.png"></b></li>
										</c:if>
										<c:if test="${requestScope.overTimeList.get(2)!=null}">
											<li><i><img src="images/head.jpg"></i>
												<dl>
													<dt>${requestScope.overTimeList.get(2).userName}</dt>
													<dd>所属分区：${requestScope.overTimeList.get(2).deptName}</dd>
												</dl> <b><img src="images/honor_3.png"></b></li>
										</c:if>

									</ul>
									<dl>
										<dt>加班时长</dt>
										<c:if test="${requestScope.overTimeList.get(0)!=null}">
											<dd>${requestScope.overTimeList.get(0).overTime}</dd>
										</c:if>
										<c:if test="${requestScope.overTimeList.get(1)!=null}">
											<dd>${requestScope.overTimeList.get(1).overTime}</dd>
										</c:if>
										<c:if test="${requestScope.overTimeList.get(2)!=null}">
											<dd>${requestScope.overTimeList.get(2).overTime}</dd>
										</c:if>
									</dl>
								</div>
								<c:if test="${requestScope.overTimeList.get(0)!=null}">
									<p>${requestScope.overTimeList.get(0).deptName}的同学们很给力，加油！</p>
								</c:if>
							</div>
							<!-- 今天迟到名单 -->
							<div class="con">
								<div>

									<ul>
										<c:if test="${requestScope.listlateusers!=null}">
											<c:forEach var="late" items="${requestScope.listlateusers}">
												<li style="float: left; list-style: none"><i> <img
														src="${late.photosurl}">
												</i>

													<dl>
														<dt>工号：${late.userId }</dt>
														<dd>姓名：${late.userName }</dd>
														<dd>打卡时间:</dd>
														<dd>${late.attTime }</dd>
													</dl></li>
											</c:forEach>
										</c:if>



									</ul>



								</div>


							</div>
							<!-- 昨日加班名单 -->
							<div class="con">
								<div>
									<ul>
										<c:if test="${requestScope.overTimesUsers!=null}">
											<c:forEach var="otu" items="${requestScope.overTimesUsers}">
												<li style="float: left; list-style: none"><i> <img
														src="${otu.photosurl}">
												</i>
													<dl>
														<dt>工号：${otu.userId }</dt>
														<dd>姓名：${otu.userName }</dd>
														<dd>加班时长：${otu.overTime }</dd>

													</dl></li>
											</c:forEach>
										</c:if>



									</ul>

								</div>


							</div>

						</div>
						<script type="text/javascript">
							$(function() {
								var n = 0;
								$(".right_box .info_box .honor .tit a")
										.mouseover(
												function() {
													n = $(this).index();
													$(this).addClass("on")
													$(this).siblings()
															.removeClass("on")
													$(
															".right_box .info_box .honor .con")
															.hide().eq(n)
															.fadeIn()
												})
							})
						</script>
					</div>
				</div>
			</div>
		</div>

	</div>
	<!-- 戴布斯：添加提示弹框 -->
	<div class="alert"></div>
	<script>
		layui
				.use(
						'layer',
						function() { //独立版的layer无需执行这一句
							var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

							//触发事件
							var active = {
								setTop : function() {
									var that = this;
									//多窗口模式，层叠置顶
									layer
											.open({
												type : 2 //此处以iframe举例
												,
												title : '当你选择该窗体时，即会在最顶端',
												area : [ '390px', '260px' ],
												shade : 0,
												maxmin : true,
												offset : [ //为了演示，随机坐标
														Math.random()
																* ($(window)
																		.height() - 300),
														Math.random()
																* ($(window)
																		.width() - 390) ],
												offset2 : [ //为了演示，随机坐标
														Math.random()
																* ($(window)
																		.height() - 300),
														Math.random()
																* ($(window)
																		.width() - 390) ],
												offset3 : [ //为了演示，随机坐标
														Math.random()
																* ($(window)
																		.height() - 300),
														Math.random()
																* ($(window)
																		.width() - 390) ],
												content : '//layer.layui.com/test/settop.html',
												btn : [ '继续弹出', '全部关闭' ] //只是为了演示
												,
												yes : function() {
													$(that).click();
												},
												btn2 : function() {
													layer.closeAll();
												}

												,
												zIndex : layer.zIndex //重点1
												,
												success : function(layero) {
													layer.setTop(layero); //重点2
												}
											});
								}

								,
								notice : function() {
									var ctext= '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
									'<c:if test = "${requestScope.deptNot!=null}">'+
										'<c:forEach var="notice" items="${requestScope.deptNot}">'+
											'<span>${notice.notContent}</span>&nbsp&nbsp'+
											'<span>${notice.notTime}</span><br><br>'+
										'</c:forEach>'
									'</c:if></div>';
									//示范一个公告层
									layer
											.open({
												type : 1,
												title : false //不显示标题栏
												,
												closeBtn : false,
												area : '300px;',
												shade : 0.8,
												id : 'LAY_layuipro' //设定一个id，防止重复弹出
												,
												btn : [ '好的，知道咯' ],
												btnAlign : 'c',
												moveType : 1 //拖拽模式，0或者1
												,
												content : ctext,
												//area:[100px,500px],
												area : [ '500px', '600px' ],
												title:'公司公告',
												/* success : function(layero) {
													var btn = layero
															.find('.layui-layer-btn');
													btn
															.find(
																	'.layui-layer-btn0')
															.attr(
																	{
																		href : 'http://www.layui.com/',
																		target : '_blank'
																	});
												} */
											});
								},
								offset : function(othis) {
									var type = othis.data('type'), text = othis
											.text();

									layer
											.open({
												type : 1,
												offset : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
												,
												id : 'layerDemo' + type //防止重复弹出
												,
												content :  $('#request'),
											
												area:['400px','450px'],
												btnAlign : 'c' //按钮居中
												,
												title:'请假申请',
												shade : 0 //不显示遮罩
												,
												yes : function() {
													layer.closeAll();
												}
											});
								},
								/* 请假审批 */
								offset2 : function(othis) {
									var type = othis.data('type'), text = othis
											.text();

									layer.open({
										type : 1,
										offset2 : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
										,
										id : 'layerDemo' + type //防止重复弹出
										,
										content : $('#req'),
										title : '部门员工请假审批',
										btnAlign : 'c' //按钮居中
										,
										anim:1,
										shade : 0 //不显示遮罩
										,
										area : [ '1400px', '600px' ],
										yes : function() {
											layer.closeAll();
										}
									});
								},
								offset3 : function(othis) {
									var type = othis.data('type'), text = othis
											.text();

									layer.open({
										type : 1,
										offset3 : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
										,
										id : 'layerDemo' + type //防止重复弹出
										,
										content : $("#not").html(),
										title : '发布部门公告',
										btnAlign : 'c' //按钮居中
										,
										shade : 0 //不显示遮罩
										,
										area : [ '500px', '400px' ],
										yes : function() {
											layer.closeAll();
										}
									});
								}

							};

							$('#layerDemo .gonggao').on(
									'click',
									function() {
										var othis = $(this), method = othis
												.data('method');
										active[method] ? active[method].call(
												this, othis) : '';
									});

						});
	</script>
	<div id='req' style="display: none">
		<table class="layui-hide" id="test" lay-filter="test"></table>



		<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">查看事由</a>
 <a class="layui-btn layui-btn-xs" lay-event="agree">通过</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refuse">拒绝</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


		<!-- <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> -->
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

		<script>
			layui.use('table', function() {
				var table = layui.table;

				table.render({
					elem : '#test',
					url : 'RequestsServlet',
					toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
					,
					defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
						title : '提示',
						layEvent : 'LAYTABLE_TIPS',
						icon : 'layui-icon-tips'
					} ],
					title : '用户数据表',
					cols : [ [ {
						field : 'reqId',
						title : 'reqId',
						width : 75,
						fixed : 'left',

						sort : true
					}, {
						field : 'userName',
						title : '请假人',
						width : 130,
						edit : 'text'
					}, {
						field : 'reqContent',
						title : '请假事由',
						width : 650,
						edit : 'text',

						templet : function(res) {
							return '<em>' + res.reqContent + '</em>'
						}
					}, {
						field : 'reqFlag',
						title : '状态',
						width : 80,
						edit : 'text',
						sort : true
					}, {
						field : 'reqTime',
						title : '提交时间 ',
						width : 200
					}

					, {
						fixed : 'right',
						title : '操作',
						toolbar : '#barDemo',
						width : 260
					} ] ],
					page : true,
					id : 'testReload'//戴布斯：刷新表格用
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
					case 'getCheckData':
						var data = checkStatus.data;
						layer.alert(JSON.stringify(data));
						break;
					case 'getCheckLength':
						var data = checkStatus.data;
						layer.msg('选中了：' + data.length + ' 个');
						break;
					case 'isAll':
						layer.msg(checkStatus.isAll ? '全选' : '未全选');
						break;

					//自定义头工具栏右侧图标 - 提示
					case 'LAYTABLE_TIPS':
						layer.alert('这是工具栏右侧自定义的一个图标按钮');
						break;
					}
					;
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					console.log(obj)
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {

							$.post("RequestsServlet",
									"op=del&id=" + data.reqId, function(json) {

										layer.msg(data != "true" ? "成功"
												: "失败", {
											icon : 1
										});

										obj.del();//layui的删除行，
										//戴布斯：重载表格
										table.reload('testReload', {
											page : {
												curr : 1
											//重新从第 1 页开始
											},
											where : {
												key : {
													id : $('#demoReload').val()
												}
											}
										}, 'data');
										layer.close(index);
									});

						});

					} else if (obj.event === 'edit') {
						layer.prompt({
							formType : 2,
							value : data.reqContent
						}, function(value, index) {
							obj.update({
								email : value
							});
							layer.close(index);
						});
					} else if (obj.event === 'agree') {
						layer.confirm('确定批准请假？', function(index) {

							$.post("RequestsServlet", "op=agree&id="
									+ data.reqId, function(json) {

								layer.msg(data != "true" ? "成功" : "失败", {
									icon : 1
								});
                                
								layer.close(index);
								//location.reload();//这是刷新这里用的是js ，可以用layui 
								//戴布斯：重载表格
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : {
										key : {
											id : $('#demoReload').val()
										}
									}
								}, 'data');
							});
                          
						});
					} else if (obj.event === 'refuse') {
						layer.confirm('确定拒绝请假？', function(index) {

							$.post("RequestsServlet", "op=refuse&id="
									+ data.reqId, function(json) {

								layer.msg(data != "true" ? "成功" : "失败", {
									icon : 1
								});
								//location.reload();//这是刷新这里用的是js ，可以用layui 
								layer.close(index);
								//戴布斯：重载表格
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : {
										key : {
											id : $('#demoReload').val()
										}
									}
								}, 'data');
							});

						});
					}
				});
			});
		 </script>
	</div>
	<!-- 	发布公告 -->
	<div id='not' style="display: none">
		<form class="layui-form" action="ns.do?op1=add2" method="post">
			<h1 align="center">发布公告</h1>
			<br /> <br /> <label class="layui-form-label">公告标题</label>
			<div class="layui-input-block">

				<input type="text" name="title" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
			<br /> <br />
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-input-block">
				<br /> <br />
				<!-- 戴布斯：添加发布成功提示 -->
				<button type="submit" class="layui-btn" onclick="load()">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
	<!-- 请假界面 -->
	<div id='request' style="display: none; align: center">
		<br>
		<form class="layui-form" action="min.do?op=addreq" method="post">

			开始时间：<input type="datetime-local" name="starttime"> <br />
			结束时间：<input type="datetime-local" name="endtime">
			<textarea placeholder="请充分填写请假事由" name="content"
				style="height: 280px;" class="layui-textarea"></textarea>

			<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		</form>
	</div>
	<script>
		
		layui.use(['table','form'],
		            function() {
		                $ = layui.jquery;
		                var form = layui.form,
		                layer = layui.layer;
		                layui.form.on('submit(formDemo)', function(data){
						    var obj=data.field;
						    //此时，需要提交表单信息给控制器，不是普通提交，异步的ajax提交
						    $.ajax({
						    	url:"sta.do",
						    	type: "post",
						    	data:{
						    		op:"addreq",
		                    		reqContent:"请假开始时间："+obj.starttime+";请假结束时间："+obj.endtime+";请假事由:"+obj.content
		                    	},
						    	success:function(msg)
						    	{
						    		//提示
									layer.msg(msg == "true" ? "操作成功!"
											: "操作失败", {
										icon : 1,
										time:1000
									}, function() {

										//关闭层，刷新页面[细化]
										parent.layer.closeAll();
										
										//??
										//data.update();
										
										//如果普通js的方法呢?
										//window.location.reload();

									});
						    	}
						    	
						    	
						    }); 
						    
						    
						    return false; //表单就不提交了
						  });

		            });
		


		</script>
	<script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js"
		charset="utf-8"></script>
	<script type="text/javascript"
		src="backstageCSSandJS/js/echarts-for-x-admin.js"></script>
	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'echarts-for-x-admin');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '周周考勤表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['迟到人数','早退人数','加班人数','加班时长','正常上班人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            }, 
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'迟到人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list1.get(0)}, ${requestScope.list1.get(1)}, ${requestScope.list1.get(2)}, ${requestScope.list1.get(3)}, ${requestScope.list1.get(4)}]
                },
                {
                    name:'早退人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list2.get(0)}, ${requestScope.list2.get(1)}, ${requestScope.list2.get(2)}, ${requestScope.list2.get(3)}, ${requestScope.list2.get(4)}]
                },
                {
                    name:'加班人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list3.get(0)}, ${requestScope.list3.get(1)}, ${requestScope.list3.get(2)}, ${requestScope.list3.get(3)}, ${requestScope.list3.get(4)}]
                },
                {
                    name:'加班时长',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list4.get(0)}, ${requestScope.list4.get(1)}, ${requestScope.list4.get(2)}, ${requestScope.list4.get(3)}, ${requestScope.list4.get(4)}]
                },
                {
                    name:'正常上班人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list5.get(0)}, ${requestScope.list5.get(1)}, ${requestScope.list5.get(2)}, ${requestScope.list5.get(3)}, ${requestScope.list5.get(4)}]
                } 
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        // 戴布斯：添加发布成功提示
        function load() {
			$('.alert').html('发布成功！').addClass('alert-success').show().delay(
					3500).fadeOut();
		}
        </script>
</body>

</html>

